<template>
  <div class="case" v-for="item in caseData" :key="item.id">
    <span class="case-title">{{ item.title }}</span>
    <span class="case-desc">
      {{ item.desc }}
    </span>
    <ul class="introduce-list">
      <li class="introduce-item" v-for="intro in item.imgArr">
        <div class="introduce-content">
          <p class="title">{{ intro.imgTitle }}</p>
          <p class="content">{{ intro.content }}</p>
        </div>
      </li>
    </ul>
    <div class="toggle-btn">
      <img src="@/assets/images/industry/btn-prev.png" alt="" />
      <img src="@/assets/images/industry/btn-highlighted.png" alt="" />
    </div>
  </div>
</template>
<script setup lang="ts">
interface ImgList {
  imgSrc: string
  imgTitle: string
  content: string
}

interface Case {
  id: number
  title: string
  desc: string
  imgArr: ImgList[]
}
defineProps<{
  caseData: Case[]
}>()
</script>
<style scoped lang="scss">
.case {
  text-align: center;
}
.case-title {
  height: 42px;
  font-size: 30px;
  font-weight: 400;
  text-align: left;
  color: #000000;
  display: inline-block;
}

.case-desc {
  margin: 60px 0;
  width: 1088px;
  height: 101px;
  font-size: 16px;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: 400;
  text-align: center;
  color: #000000;
  line-height: 32px;
  display: inline-block;
}
.introduce-list {
  display: flex;
  justify-content: space-between;

  .introduce-list {
    margin-bottom: 43px;
  }

  .introduce-item {
    width: 238px;
    height: 302px;
    background: #a59e8f;
    border-radius: 11px;
    padding: 21px 23px;
    color: #fff;
    line-height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: left;
  }

  .introduce-content > .title {
    font-size: 22px;
    font-weight: 400;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .introduce-content > .content {
    margin-top: 16px;
    font-size: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.toggle-btn {
  display: flex;
  width: 70px;
  margin: 30px auto;
}
</style>
